<template>
  <!-- 关于我 -->
  <div class="about-me">
    <!-- 顶部欢迎区域 -->
    <div class="welcome">
      <p v-html="info"></p>
    </div>

    <SkeletonLoading v-if="skeleton" />

    <div class="view">
      <h2>关于我的学习经历</h2>
      <!-- 成长经历 -->
      <div class="mature-experince">
        <Timeline :value="studyExperienceList" align="alternate">
          <template #content="slotProps">
            <Card>
              <template #subtitle>
                <span style="font-size: 15px">{{
                  slotProps.item.createTime
                }}</span>
              </template>
              <template #content>
                <p style="color: #000">
                  {{ slotProps.item.content }}
                </p>
              </template>
            </Card>
          </template>
        </Timeline>
      </div>

      <!-- 个人项目 -->
      <h2>个人项目</h2>
      <div class="my-project">
        <div class="item">
          <ProjectCard
            v-for="item in projectList"
            :project-info="item"
            :key="item.id"
            @click="router.push(`/project/${item.id}`)"
          />
        </div>
        <div class="page">
          <el-pagination
            v-model:current-page="pageQuery.page"
            :page-size="pageQuery.pageSize"
            :disabled="false"
            layout="total, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import ProjectCard from "@/components/ProjectCard.vue";
import { getProjectListSerivce } from "@/api/Project";
import { useRouter } from "vue-router";
import {
  getMyWelcomeInfoService,
  getStudyExperienceListService,
} from "@/api/MyInfo";
import SkeletonLoading from "@/components/SkeletonLoading.vue";

const router = useRouter();

const skeleton = ref(true);
// 欢迎词
const info = ref("");

// 项目数据
const projectList = ref([]);
// 学习经历数据
const studyExperienceList = ref([]);

/**
 * 分页参数
 */
const total = ref(0);
const pageQuery = ref({
  page: 1,
  pageSize: 4,
});

/**
 * 分页相关
 */
const handleCurrentChange = (page) => {
  pageQuery.value.page = page;
  getProjectList(pageQuery.value);
};
const handleSizeChange = (pageSize) => {
  pageQuery.value.pageSize = pageSize;
  getProjectList(pageQuery.value);
};

/**
 * 查询项目列表信息
 * @param query
 */
const getProjectList = async (query) => {
  const { data } = await getProjectListSerivce(query);
  total.value = data.total;
  projectList.value = data.records;
};

/**
 * 获取学习经历数据
 */
const getStudyExperienceList = async () => {
  await getStudyExperienceListService().then(({ data }) => {
    skeleton.value = false;
    studyExperienceList.value = data;
  });
};

/**
 * 获取欢迎词
 */
const getWelcomeInfo = async () => {
  const { data } = await getMyWelcomeInfoService();
  info.value = data.content;
};

onMounted(() => {
  getProjectList(pageQuery.value);
  getStudyExperienceList();
  getWelcomeInfo();
});
</script>

<style lang="scss" scoped>
.about-me {
  height: 102.5vh;
  padding: 24px 18px;
  background: #fff;
  border-radius: 0px 0px 12px 12px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
  overflow: auto;
  scrollbar-width: none;

  // 顶部欢迎卡片
  .welcome {
    min-height: 20vh;
    padding: 20px 20px;
    border-radius: 12px;
    p {
      :deep(h1) {
        display: flex;
        align-items: center;
        font-size: 31px;
      }
      :deep(p) {
        line-height: 1.7;
      }
      :deep(img) {
        margin-left: 15px;
      }
    }
  }

  .desc {
    min-height: 42px;
    line-height: 42px;
  }

  .life {
    margin: 10px 0px;
    line-height: 1.5;
    color: #9b9999;
  }
}

// 成长经历
.mature-experince {
  padding: 20px;
  border-radius: 12px;
  @media (max-width: 768px) {
    padding: 0px;
  }
}

// 个人项目
.my-project {
  min-height: 20vh;
  padding: 20px;
  border-left: 1px solid #63bce6;

  .page {
    display: flex;
    justify-content: end;
  }
}
</style>